<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%  
response.setHeader("Access-Control-Allow-Origin", "*");  
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>汽车销量·数据工厂</title>
	<link href="${pageContext.request.contextPath }/img/webLogoIcon.png" rel="shortcut icon">
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/font-awesome.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/style.css" rel="stylesheet">
    <!-- FooTable -->
    <link href="${pageContext.request.contextPath }/css/footable.core.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/css/mypage.css" rel="stylesheet">
    <style>
		.select2_demo_1{
			float: left;
			width: 120px;
			display: inline;
			margin-left: 10px;
		}
		.form-control{
			display: inline;
		}
		
		.col-sm-3{
			float:right;
			width: 560px;
		}
		.input-group{
			float:right;
			width: 240px;
			margin-left: 5px;
		}
	   td{
	        vertical-align:middle;
	    }
	    .source{
	    	display:inline-block;
	        cursor: pointer;
		   	margin-bottom: 10px;
		    padding: 5px 5px;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    margin-right: 20px;
   		}
   		.sourceAct{
   			border-color:#f8ac59;
   			color:#f8ac59;
   		}
   		.webAct{
   			border-color:#f8ac59 !important;
   			color:#f8ac59;
   		}
   		.web{
	    	display:inline-block;
	        cursor: pointer;
		   	margin-bottom: 10px;
		    padding: 5px 5px;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    margin-right: 20px;
   		}
	</style>
</head>
<body>
    <div id="wrapper">
        <nav class="navbar-default navbar-static-side" role="navigation">
            <%request.setAttribute("LEFT", "carSales");%>
            <%@include file="../components/left.jsp"%>
        </nav>
        <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom m-b-20">
		<jsp:include page="../components/head.jsp" flush="true" />
        </div>
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>汽车销量</h2>
                <ol class="breadcrumb">
                	<li class="nav-main1">
                		<a href="${pageContext.request.contextPath}/admin/tosystem_overview">主页</a>
                	</li>
                	<li class="nav-main2" >
                		<a id="navigation1" href="#" >汽车行业</a>
                	</li>
                	<li class="active">
                		<a>汽车销量</a>
                	</li>
               	</ol>
            </div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                <div class="ibox float-e-margins barcontent" id="barcontent"></div>
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div class="row" style="font-size: 16px;margin-top: 2%;padding: 0 30px;">
                            	<span>车型选择：</span>
                            	<select style="outline:none;border-radius:4px;padding: 3px 5px;" id="car-select" onchange="carlist()">
                            	</select>
                            	<span>榜单选择：</span>
                            	<select style="outline:none;border-radius:4px;padding: 3px 5px;" id="car-select-two" onchange="getlist(1)">
                            	</select>
                            </div>
<!--                             <div class="row" style="font-size: 16px;margin-top: 2%;padding: 0 30px;"> -->
                            	
<!--                             </div> -->
                            <div class="row m-t-sm">
                                <div class="col-lg-12">
                                <div class="panel blank-panel">
                                <div class="panel-body">
                                <div class="tab-content">
                                <div class="tab-pane active" id="tab-1">
                                
                                    <div class="feed-activity-list">
                                    	<table class="table " >
                                    		<thead id="list-hand">
	                                    		<tr>
	                                    			<th>序号</th>
	                                    			<th>图标</th>
	                                    			<th>名称</th>
	                                    			<th>网站名称</th>
	                                    			<th>车型</th>
	                                    			<th>车牌名</th>
	                                    			<th>采集时间</th>
											  	</tr>
                                    		</thead>
                                    		<tbody id="list">
                                    
                                    		</tbody>
										</table>
                                    </div>
<!--                                     <div class="feed-activity-list" id="logs"> -->
<!--                                     	<div class="box" id="box" style="float: right;"></div> -->
<!--                                     </div> -->
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        </div>
		<jsp:include page="../components/footer.jsp" flush="true" />
        </div>
        </div>
    <!-- Mainly scripts -->
    <script src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.metisMenu.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.slimscroll.min.js"></script>
    <!-- Custom and plugin javascript -->
    <script src="${pageContext.request.contextPath }/js/inspinia.js"></script>
    <script src="${pageContext.request.contextPath }/js/pace.min.js"></script>
    <!-- FooTable -->
    <script src="${pageContext.request.contextPath }/js/footable.all.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/mypage.js"></script>
	
	<script src="${pageContext.request.contextPath}/js/anychart-base.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/userCustom.js"></script>
    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function() {
            var data = 
        		[
        		     ['东风', '4054'],
        		     ['广汽', '9410'],
        		     ['一汽', '6610'],
        		     ['上汽', '7130'],
        		     ['byd','8000'],
        		     ['长安','4760'],
        		     ['吉利', '1670'],
        		     ['北京', '2210'],
        		     ['长城', '2980'],
        		     ['丰田', '1980'],
        		     ['大众', '1080']
        			]
        	createbar("barcontent","汽车销量排行",data)
        	setTimeout(function(){$(".anychart-credits").hide(); }, 300);
//         	$(".anychart-credits").remove()
//         	var box=document.getElementsByClassName("anychart-credits");
// 			box.get(0).remove();
            $('.footable').footable();
        });
        
        
        $(function(){
        	carTypes()
        	
		});
        
        function carTypes(){
        	$.ajax({
        		url : "${pageContext.request.contextPath}/carDaquan/first_menu",
        		type : "post",
        		data:{},
        		async:false,
        		success : function(res) {
        			res = JSON.parse(res);
        			var aggregations= res.aggregations.group_by_tags.buckets
        			for (var i = 0; i < aggregations.length; i++) {
        				var selectstr = aggregations[i].key
						var html = '<option value="'+selectstr+'">'+selectstr+'</option>'
					     $('#car-select').append(html)
					}
        			carlist()
        		},
        		error: function(err) {
        			console.log(err)
        		}
        	});
        }
        
		function carlist(){
			var carType = $('#car-select').val()
        	$.ajax({
        		url : "${pageContext.request.contextPath}/carDaquan/second_menu",
        		type : "post",
        		data:{
        			first_menu: carType,
        		},
        		success : function(res) {
        			res = JSON.parse(res);
        			var aggregations= res.aggregations.group_by_tags.buckets


        			var htmlselect = "";
        			for (var i = 0; i < aggregations.length; i++) {
        				var selectstr = aggregations[i].key
        				htmlselect += '<option value="'+selectstr+'">'+selectstr+'</option>'
					     
					}
        			$('#car-select-two').html(htmlselect)
        			getlist(1)
//         			res = JSON.parse(res);
//         			$('#dataCount').html('共'+res.totalData+'条')
//         			paging(res.totalData, res.totalPage, pageNum)
//         			$('#list').html('')
//         			var list = res.list
//         			for (var i = 0; i < list.length; i++) {
// 						var html = '<tr>'
// 			            				+'<td>'+(i+1)+'</td>'
// 			            				+'<td><img src="'+list[i].logo+'"></td>'
// 			            				+'<td><a target="_blank" href="${pageContext.request.contextPath}/carDaquan/car-daquan-detail?article_public_id='+list[i].article_public_id+'">'+list[i].model+'</a></td>'
// 			            				+'<td>'+list[i].website_name+'</td>'
// 			            				+'<td>'+list[i].models_type+'</td>'
// 			            				+'<td>'+list[i].brand+'</td>'
// 			            				+'<td>'+list[i].spider_time+'</td>'
// 							 		+'</tr>'
// 					     $('#list').append(html)
// 					}
//         			if (list.length == 0) {
//         				$('#list').html('<tr><td colspan=10>暂无数据！</td></tr>')
// 					}
        		},
        		error: function(res) {
        			$('#list').html('<tr><td colspan=10>暂无数据！</td></tr>')
        		}
        	});
        }
        
        function getlist(pageNum){
			var select1 = $('#car-select').val()
			var select2 = $('#car-select-two').val()
        	$.ajax({
        		url : "${pageContext.request.contextPath}/carDaquan/lesrankinglist",
        		type : "post",
        		data:{
        			first_menu: select1,
        			second_menu: select2,
        		},
        		success : function(res) {
        			res = JSON.parse(res);
        			if(res.code == 200){
        			$('#list').html('')
        			var json = res.data[0]._source.leaderboard_jon
        			var list = JSON.parse(json);
					var hand = "<tr>"
					var htmlall ="";
					var handl = []
        			for (var i = 0; i < list.length; i++) {
        				var aa = list[i]
        				if(i == 0){
	        				for(var key in aa){
	        					if(key == "jump"){
		        					
	        					}else{
	        						hand += "<th>"+key+"</th>";
		        					handl.push(key)
	        					}
	        				}
        				}
						var html = '<tr>'
						for(var j =0 ;j<handl.length; j++){
							if(handl[j] == "jump"){
								
							}else{
								html	+= '<td>'+aa[handl[j]]+'</td>'
							}
							
						}
            				html	+='</tr>';
            				htmlall += 	html
					     
					}
					hand += "</tr>"
					$("#list-hand").html(hand);
					$('#list').html(htmlall)
        			if (list.length == 0) {
        				$('#list').html('<tr><td colspan=10>暂无数据！</td></tr>')
					}
        			}else{
        				$('#list').html('<tr><td colspan=10>暂无数据！</td></tr>')
        			}
        		},
        		error: function(res) {
        			$('#list').html('<tr><td colspan=10>暂无数据！</td></tr>')
        		}
        	});
        }
		
        
		function JumpToPage(pageNum) {
			carlist(pageNum)
		}
		
		//跑马灯方法 
// 		 function init(){
// 			    //获取标题
// 			    var title=document.title;
// 			    //分割字符串--->字符数组
// 			    var arr=title.split("");
// 			    //删除第一个元素并返回该元素
// 			    var e=arr.shift();
// 			    //把一个对象添加到数组末尾
// 			    arr.push(e);
// 			    //把数组转换成字符串
// 			    var marquee=arr.join("");
// 			    //返回给浏览器
// 			    document.title=marquee;
// 			    //定时一直执行
// 			    window.setTimeout("init()",1000);
// 			}
// 			window.onload=init;
    </script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</body>
</html>
